<template>
  <div>
    <div class="f-16 c_text2 mb-16 fw-6">分发条件</div>
    <div class="panelbox flex mb-16">
      <div class="flexcolumn">
        <div class="mr-16 mb-5">
          <el-radio v-model="form.radio" :label="1">
            <span class="f-14 c_text2 fw-6">全部分发</span>
          </el-radio>
        </div>
        <div class="flexcolumn pl-24">
          <div class="f-12 c_text3 mb-16">
            符合分配规则的对话都会进入分发流程
          </div>
        </div>
      </div>
    </div>

    <div class="panelbox flexcolumn mb-16">
      <div class="flexcolumn">
        <div class="mr-16 mb-5">
          <el-radio v-model="form.radio" :label="2">
            <span class="f-14 c_text2 fw-6">触发关键词进入分发</span>
          </el-radio>
        </div>
        <div class="flexcolumn pl-24">
          <div class="f-12 c_text3 mb-16">
            客户以及客户群中的群成员发送的文本消息符合规则才会进入分发流程
          </div>
        </div>
      </div>
      <div class="flexcolumn mt-10">
        <div class="mr-16 mb-10">
          <el-checkbox v-model="form.checked1">
            <span class="f-14 c_text2">
              精准关键词
              <el-tooltip
                class="item"
                effect="dark"
                content="文本消息中只有关键词（任一关键词），一字不差，即符合规则"
                placement="top-start"
              >
                <svg-icon icon-class="iquestion" class-name="c_888999 f-14" />
              </el-tooltip>
              ：
            </span>
          </el-checkbox>
        </div>
        <div class="flexcolumn pl-24">
          <div class="flex">
            <el-input
              placeholder="输入关键词，按回车添加"
              size="small"
              v-model="keyword1"
              maxlength="50"
              show-word-limit
              style="width: 580px"
              @keyup.enter.native="handleAdd(1)"
            >
              <template slot="append">
                <i
                  class="el-icon-plus f-16 c_primary"
                  @click="handleAdd(1)"
                ></i>
              </template>
            </el-input>
            <div class="ml-8 f-14 pt-8">{{ jztags.length }} / 100</div>
          </div>
          <div class="flex mt-8 flexwrap">
            <span
              v-for="(item, index) in jztags"
              :key="index"
              class="mytag f-14"
              >{{ item }}
              <i
                class="el-icon-close commhover"
                @click="removeLable(index, 1)"
              ></i
            ></span>
          </div>
        </div>
      </div>

      <div class="flexcolumn mt-10">
        <div class="mr-16 mb-10">
          <el-checkbox v-model="form.checked1">
            <span class="f-14 c_text2">
              模糊关键词
              <el-tooltip
                class="item"
                effect="dark"
                content="只要发送的文本消息中包含任一关键词，即符合规则"
                placement="top-start"
              >
                <svg-icon icon-class="iquestion" class-name="c_888999 f-14" />
              </el-tooltip>
              ：
            </span>
          </el-checkbox>
        </div>
        <div class="flexcolumn pl-24">
          <div class="flex">
            <el-input
              placeholder="输入关键词，按回车添加"
              size="small"
              v-model="keyword2"
              maxlength="50"
              show-word-limit
              style="width: 580px"
              @keyup.enter.native="handleAdd(2)"
            >
              <template slot="append">
                <i
                  class="el-icon-plus f-16 c_primary"
                  @click="handleAdd(2)"
                ></i>
              </template>
            </el-input>
            <div class="ml-8 f-14 pt-8">{{ mhtags.length }} / 100</div>
          </div>
          <div class="flex mt-8 flexwrap">
            <span
              v-for="(item, index) in mhtags"
              :key="index"
              class="mytag f-14"
              >{{ item }}
              <i
                class="el-icon-close commhover"
                @click="removeLable(index, 2)"
              ></i
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        radio: false,
      },
      keyword1: "",
      keyword2: "",
      jztags: ["11111"],
      mhtags: ["222"],
    };
  },
  methods: {
    getList() {
      this.loading = true;
      getsubUserList(this.queryParams).then((response) => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    handleAdd(type) {
      if (type == 1) {
        //精准关键词
        if (this.keyword1) {
          if (this.jztags.includes(this.keyword1)) {
            this.$message.warning("标签重复");
            return;
          }
          this.jztags.push(this.keyword1);
          this.keyword1 = "";
        }
      } else {
        //模糊关键词
        if (this.keyword2) {
          if (this.mhtags.includes(this.keyword2)) {
            this.$message.warning("标签重复");
            return;
          }
          this.mhtags.push(this.keyword2);
          this.keyword2 = "";
        }
      }
    },

    removeLable(index,type){
      if(type == 1){
        this.jztags.splice(index, 1);
      }else{
        this.mhtags.splice(index, 1);
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.panelbox {
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 16px 16px 21px;
}
.r_box {
  flex: 1;
}
::v-deep .el-input-group__append {
  padding: 0 12px;
}
.mytag {
  position: relative;
  line-height: 24px;
  padding: 0 10px;
  font-weight: 400;
  color: #222;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
  white-space: break-spaces;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-color: #5976ef transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
  }
}
</style>